<template>
  <view class="page">
    <nav-bar :left="true">
      <template #title>
        {{ "工作台" }}
      </template>
    </nav-bar>
    <view class="container">
      <!-- 轮播图 -->
      <view class="my-banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in bannerList" :key="item">
            <image
              style="width: 100%; height: 142px"
              :src="toCaseImg(item)"
              mode="widthFix"
            />
          </van-swipe-item>
        </van-swipe>
      </view>
      <view class="my-card">
        <view class="my-card-title">快捷设置</view>
        <van-grid :column-num="4">
          <van-grid-item @click="handleToPage('system')">
            <uni-icons type="color" size="28" color="#000"></uni-icons>
            菜单管理
          </van-grid-item>
          <van-grid-item @click="handleToPage('addForm')">
            <uni-icons type="plus" size="28" color="#000"></uni-icons>
            添加人员
          </van-grid-item>
          <van-grid-item @click="handleToPage('map')">
            <uni-icons type="location" size="28" color="#000"></uni-icons>
            获取定位
          </van-grid-item>
          <van-grid-item @click="handleToPage('uploadForm')">
            <uni-icons type="folder-add" size="28" color="#000"></uni-icons>
            文件上传
          </van-grid-item>
          <van-grid-item @click="handleToPage('scan')">
            <uni-icons type="scan" size="28" color="#000"></uni-icons>
            扫码
          </van-grid-item>
          <van-grid-item @click="handleToPage('canvasView')">
            <uni-icons
              type="map-pin-ellipse"
              size="28"
              color="#000"
            ></uni-icons>
            图形绘制
          </van-grid-item>
          <!-- <van-grid-item @click="handleToPage('pdf')">
            <uni-icons
              type="image"
              size="28"
              color="#000"
            ></uni-icons>
            预览pdf
          </van-grid-item> -->
        </van-grid>
      </view>
      <!-- 使用svg组件 -->
      <!-- <svg-icon iconClass="phone"></svg-icon> -->
    </view>
    <tab-bar :currentTab="currentTab" :tabs="tabs"></tab-bar>
  </view>
</template>

<script lang="ts" setup>
import { onLoad } from "@dcloudio/uni-app";
import { hideWxMenu, hideWxbar } from "@/utils/common";
const { proxy } = getCurrentInstance();
const currentTab = ref(1);
const tabs = proxy.menuTabs();
const bannerList = computed(() => {
  return ["banner-1", "banner-2", "banner-3"];
});

function handleToPage(page) {
  if (page) {
    navigate("navigateTo", page);
  } else {
    uni.showToast({
      title: "模块建设中~",
      icon: "none",
    });
  }
}

onLoad(() => {
  hideWxMenu();
  hideWxbar();
});
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: calc(100% - 96px);
  overflow: auto;
  .my-banner {
    width: 100%;
    height: 142px;
    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      height: 142px;
      line-height: 142px;
      text-align: center;
    }
  }
  .my-card {
    margin-top: 8px;
    width: 100%;
    .my-card-title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 8px;
      padding: 0px 8px;
      display: flex;
      align-items: center;
      &::before {
        content: "";
        display: inline-block;
        width: 3px;
        height: 15px;
        background-color: #1989fa;
        margin-right: 8px;
      }
    }
  }
}
</style>
